<template>
  <div
    style="
      min-height: 100%;
      background: linear-gradient(to bottom right, pink, rgb(111, 247, 220));
    "
  >
    <el-row style="min-height: 100%">
      <el-col :span="16" style="min-height: 100vh; position: relative">
        <img src="@/assets/3.png" alt="" />
      </el-col>
      <el-col :span="8" style="min-height: 100vh">
        <el-form
          :model="user"
          :rules="rules"
          style="
            border-radius: 10px;
            border: 4px solid rgba(255, 1, 1, 0.079);
            height: 40%;
            width: 75%;
            padding: 10px;
            margin: 220px 0 0;
          "
          ref="loginRef"
          @keyup.enter.native="login"
        >
          <div
            style="
              font-size: 20px;
              font-weight: bold;
              text-align: center;
              margin-bottom: 20px;
            "
          >
            欢迎登录乡镇农业产品信息平台
          </div>
          <el-form-item prop="username">
            <el-input
              size="medium"
              clearable
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
              v-model="user.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="medium"
              clearable
              show-password
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="user.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="validCode">
            <div style="display: flex">
              <el-input
                size="medium"
                clearable
                prefix-icon="el-icon-circle-check"
                style="flex: 1"
                v-model="user.validCode"
                placeholder="请输入验证码"
              ></el-input>
              <div style="flex: 1; height: 36px" title="点击刷新">
                <ValidCode @update:value="getCode" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              :disabled="isConfirm"
              style="width: 100%"
              type="primary"
              @click="login"
              >登录</el-button
            >
          </el-form-item>
          <div>
            还没有账号？请
            <span
              style="color: #180f98; cursor: pointer"
              @click="$router.push('/register')"
              >注册</span
            >
            <!-- <span
              style="float: right; cursor: pointer"
              onmouseover="this.style.color='red';"
              onmouseout="this.style.color='#000'"
              >忘记密码？</span
            > -->
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ValidCode from '@/components/ValidCode'

export default {
  name: 'Login',
  components: {
    ValidCode
  },
  data() {
    // 验证码校验
    const validateCode = (rule, validCode, callback) => {
      if (validCode === '') {
        callback(new Error('请输入验证码'))
      } else if (validCode.toLowerCase() !== this.code) {
        callback(new Error('验证码错误'))
      } else {
        callback()
      }
    }

    return {
      isConfirm: false,
      user: {
        username: '',
        password: '',
        // 用户输入的验证码
        validCode: ''
      },
      // 验证码组件传过来的 code
      code: '',
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        validCode: [{ validator: validateCode, trigger: 'blur' }]
      }
    }
  },
  methods: {
    getCode(code) {
      // console.log(code)
      this.code = code.toLowerCase()
    },
    login() {
      this.isConfirm = true
      this.$refs['loginRef'].validate(valid => {
        if (valid) {
          // const userList = JSON.parse(localStorage.getItem('userList')) || []
          // if (
          //   userList.some(
          //     v =>
          //       v.username === this.user.username &&
          //       v.password === this.user.password
          //   )
          // ) {
          //   this.$message.success('登录成功！')
          //   this.$router.push('/')

          //   localStorage.setItem(
          //     'user',
          //     JSON.stringify({
          //       username: this.user.username,
          //       password: this.user.password
          //     })
          //   )
          // } else {
          //   this.isConfirm = false
          //   this.$message.error('用户名或密码错误！')
          // }
          this.$http
            .post('/user/login', {
              no: this.user.username,
              password: this.user.password
            })
            .then(res => {
              console.log(res)
              if (res.code === 200) {
                localStorage.setItem('curUser', JSON.stringify(res.data))

                this.$message.success('登录成功！')

                if (res.data.roleId == 1) {
                  this.$router.push('/front/')
                } else {
                  this.$router.push('/')
                }
              } else {
                this.isConfirm = false
                this.$message.error('登录失败，用户名或密码错误！')
              }
            })
        } else {
          this.isConfirm = false
          this.$message.error('登录失败！')
        }
      })
    }
  }
}
</script>

<style scoped>
img {
  display: block;
  position: absolute;
  right: -20%;
  top: 32%;
  transform: scale(1.6); /* 设置图片按照比例放大1.3倍 */
}
</style>
